<template>
	<view class="page-layout">
		<uni-search-bar style="background: #FFFFFF;" radius="100" placeholder="输入关键字" v-model="param.name" cancelButton="none" @confirm="onSearch()" @clear="onClear()" />
		<view class="select">
			<view class="word">
				<view v-if="param.descriptionTag" class="row">
					<text>{{ param.descriptionTag }}</text>
					<image :src="`${setting.sImgUrl}/find/icon_Shut.png`" @click="onAction('removeTag', k)" />
				</view>
			</view>
			<view class="right">
				<picker @change="onAction('pickerChange', $event)" :value="index" :range="tags">
					<text>筛选</text>
					<image :src="`${setting.sImgUrl}/find/select.png`" />
				</picker>
			</view>
		</view>
		<view class="page-scroll">
			<scroll-view scroll-y class="scroll-view entry" :style="{ height: `calc(100vh - ${topHeight}px)` }" @scrolltolower="scrolltolower">
				<view v-if="dataset && dataset.length">
					<template v-for="(item, index) in dataset" :key="index">
						<navigator class="row" hover-class="none" :url="`/pages/student/course/open?id=${item.id}`">
							<image :src="setting.oss_pub_domain + item.material" />
							<view class="right">
								<view>{{ item.name }}</view>
								<view class="second">
									<view>课程: {{ item.duration }}</view>
									<view class="line"></view>
									<view>
										兑换:
										<text>{{ item.exchange ? item.exchange : '免费' }}</text>
									</view>
								</view>
								<view class="bottom">
									<view class="left">
										<image :src="setting.oss_pub_domain + item.instrutorAvatar"></image>
										<text>{{ item.instrutorName }}</text>
									</view>
								</view>
							</view>
						</navigator>
					</template>
				</view>
				<z-no-data v-else></z-no-data>
				<el-load-more v-if="dataset && dataset.length" :loading="loading" :count="pager.count" :length="dataset.length" />
			</scroll-view>
		</view>
	</view>
</template>
<script>
import { storehouseAllPackagePage, getTag } from '@/api/student';
export default {
	data() {
		return {
			loading: false,
			param: { pageSize: 10, pageNum: 0, name: '', descriptionTag: '' },
			pager: {},
			dataset: [],
			tags: [],
			topHeight: 0
		};
	},
	mounted() {
		// #ifdef APP-PLUS || H5
		uni.createSelectorQuery()
			.select('.entry')
			.boundingClientRect((data) => {
				this.topHeight = data.top;
			})
			.exec();
		// #endif
		// #ifdef MP-WEIXIN
		const query = wx.createSelectorQuery().in(this);
		query.selectAll('.entry').boundingClientRect();
		query.exec(res => {
			this.topHeight = res[0][0].top;
		});
		// #endif
		this.fetchTags();
		this.fetchData();
	},
	methods: {
		async fetchData() {
			this.loading = true;
			const { rows, total } = await storehouseAllPackagePage(
				Object.assign({}, this.param, {
					descriptionTag: this.param.descriptionTag
				})
			);
			this.pager = {
				count: total
			};
			this.dataset.push(...rows);
			this.loading = false;
		},
		scrolltolower() {
			if (this.pager.count > this.dataset.length) {
				this.param.pageNum++;
				this.fetchData();
			}
		},
		async fetchTags() {
			const data = await getTag();
			this.$nextTick(() => {
				this.tags = data.reduce((result, item) => {
					result.push(item.dictLabel);
					return result;
				}, []);
			})
		},
		onSearch() {
			this.param.pageNum = 1;
			this.dataset = [];
			this.fetchData();
		},
		onClear() {
			this.param.name = '';
			this.onSearch();
		},
		async onAction(type, value) {
			if (type === 'pickerChange') {
				const index = value.detail.value;
				this.param.descriptionTag = this.tags[index];
				this.onSearch();
			} else if (type === 'removeTag') {
				this.param.descriptionTag = ''
				this.onSearch();
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.select {
	height: 80rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx 0 30rpx;
	border-bottom: 20rpx solid #f5f5f5;
	.word {
		display: flex;
		flex-wrap: wrap;
		.row {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585c66;
			background: #f0f2f5;
			border-radius: 8rpx;
			padding: 8rpx 16rpx;
			margin-right: 20rpx;
			margin-bottom: 2rpx;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.right {
		display: flex;
		align-items: center;
		width: 138rpx;
		height: 56rpx;
		border-radius: 32rpx;
		border: 2rpx solid #c4c7cc;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8a8f99;
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
}

.entry {
	background: #ffffff;
	overflow: auto;
	.row {
		margin: 0 32rpx;
		padding: 32rpx 0;
		display: flex;
		border-bottom: 2rpx solid #ebeded;
		&:last-child {
			border-bottom: 0;
		}
		image {
			width: 220rpx;
			height: 148rpx;
			border-radius: 16rpx;
			margin-right: 24rpx;
		}
		.right {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1a2233;
			.second {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8a8f99;
				margin: 16rpx 0 24rpx 0;
				.line {
					width: 2rpx;
					height: 20rpx;
					background: #d8d8d8;
					margin: 0 16rpx;
				}
				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffb210;
				}
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				width: 442rpx;
				.left {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8a8f99;
					image {
						width: 32rpx;
						height: 32rpx;
						border-radius: 32rpx;
					}
				}
				.other {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #c4c7cc;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
}
</style>
